<template>
	<view class="collageDetail" v-if="groupsDetails.product&&user">
		<view class="navigation">
			<image src="/static/images/collage/collage-back.png" class="collage-back" @click="back()" v-if="is_share=='false'" mode=""></image>
			<image src="/static/images/home.png" mode="" class="collage-back" v-else @click="backHome()"></image>
			<view class="navigation-title">开团详情</view>
		</view>
		<view class="collageDetailGodds" v-if="user.id != openGroupsUser.id">
			<view class="collages-goods-list-item">
				<image :src="groupsDetails.product.cover_url" class="goods-icon" mode=""></image>
				<view class="collages-goods-list-item-right">
					<view class="goods-describe" v-if="groupsDetails.product.title">{{ groupsDetails.product.title }}</view>
					<view class="goods-other-lable">
						<image src="/static/images/collage/free-post.png" v-if="groupsDetails.product.is_sf" class="free-post" mode=""></image>
						<image src="/static/images/collage/product-hangkong.png" v-if="groupsDetails.product.is_hongkong_direct" class="free-post" mode=""></image>
						<image src="/static/images/collage/product-hangkong.png" v-if="groupsDetails.product.is_overseas_direct" class="free-post" mode=""></image>
						<image src="/static/images/collage/high-recommend.png" v-if="groupsDetails.product.is_pop" class="high-recommend" mode=""></image>
					</view>
					<view class="deliver-goods-address"></view>
					<view class="goods-num-info">
						<view class="goods-money">
							<text>￥</text>
							<text>{{ groupsDetails.product.price_lowest }}</text>
						</view>
						<view class="goods-solded-num">已售{{ groupsDetails.product.sold_count }}件</view>
					</view>
				</view>
			</view>
		</view>
		<view class="my-collage-list" :class="user.id == openGroupsUser.id ?'listTop':''" v-if="user.id == openGroupsUser.id ">
			<view class="my-collage-list-item">
				<view class="collage-list-item-title">
					<view>我的组队</view>
					<!-- <view class="count-down" v-if="group_disabled_at!=nowDate">
						<view>距离结束还有</view>
						<view class="count-down-time" v-if="groupsDetails.end_times">
							<uni-countdown :show-day="false" :hour="groupsDetails.end_times.h" :minute="groupsDetails.end_times.m" :second="groupsDetails.end_times.s" background-color="#FEEBE3" color="#FE3F34" splitorColor="#FE3F34"></uni-countdown>
						</view>
					</view>
					<view class="count-down" v-else>
						<view>已结束</view>
						<view class="count-down-time">
							<uni-countdown :show-day="false" :hour="0" :minute="0" :second="0" background-color="#FEEBE3" color="#FE3F34" splitorColor="#FE3F34"></uni-countdown>
						</view>
					</view> -->
				</view>
				<view class="collage-list-item-user">
					<view>
						<image :src="groupsDetails.user?groupsDetails.user.avatar_url:groupsDetails.machine_user.avatar_url" class="user-img" mode=""></image>
						<view>团主</view>
					</view>
					
					<block v-if="groupsDetails.attend_users.length>0">
						<view v-for="(item,index) in groupsDetails.attend_users" :key="index">
								<block >
									<image :src="item.avatar_url" class="user-img" mode=""></image>
									<view>已参团</view>
								</block>
						</view>
						<view v-for="(item,index) in (groupsDetails.group_amount-groupsDetails.attend_users.length)" :key="index">
							<block >
								<view class="waiting-groups">＋</view>
								<view>待参团</view>
							</block>
						</view>
					</block>
					
					<block v-if="groupsDetails.attend_users.length==0">
						<view v-for="(item1,index) in groupsDetails.group_amount" :key="index">
							<block >
								<view class="waiting-groups">＋</view>
								<view>待参团</view>
							</block>
						</view>
					</block>
				</view>
				<view class="surplus-tip" v-if="groupsDetails.group_amount!=groupsDetails.attend_users.length&&group_disabled_at!=nowDate" >还差{{ groupsDetails.group_amount-groupsDetails.attend_users.length }}人成团，成团后可得开团红包</view>
				<view  class="collage-operation-btn invite-btn" v-if="user.id == groupsDetails.user.id&&groupsDetails.group_status == 'pending'&&group_disabled_at!=nowDate" @click="shareProduct()">去邀请</view>
			</view>
		</view>
		<view class="my-collage-list" :class="user.id == openGroupsUser.id ?'listTop':''" v-else>
			<view class="my-collage-list-item">
				<view class="collage-list-item-title">
					<view>
						参与
						<text class="grouper-name">{{ groupsDetails.user?groupsDetails.user.name:groupsDetails.machine_user.name }}</text>
						的团
					</view>
					<view class="count-down count-down1">
						<view>开团时间：</view>
						<view class="count-down-time">{{groupsDetails.created_at.slice(0,10)}}</view>
					</view>
				</view>
				<view class="collage-list-item-user">
					<view>
						<image :src="groupsDetails.user?groupsDetails.user.avatar_url:groupsDetails.machine_user.avatar_url" class="user-img" mode=""></image>
						<view>团主</view>
					</view>
					
					<block v-if="groupsDetails.attend_users.length>0">
						<view v-for="(item,index) in groupsDetails.attend_users" :key="index">
								<block >
									<image :src="item.avatar_url" class="user-img" mode=""></image>
									<view>已参团</view>
								</block>
						</view>
						<block v-for="(item,index) in (groupsDetails.group_amount-groupsDetails.attend_users.length)" :key="index">
							<view >
								<block >
									<view class="waiting-groups">＋</view>
									<view>待参团</view>
								</block>
							</view>
						</block>
						
					</block>
					
					<block v-if="groupsDetails.attend_users.length==0" >
						<view v-for="(item1,index) in groupsDetails.group_amount" :key="index">
							<block >
								<view class="waiting-groups">＋</view>
								<view>待参团</view>
							</block>
						</view>
					</block>
					
				</view>
				<view class="surplus-tip" v-if="groupsDetails.group_amount!=groupsDetails.attend_users.length">还差{{ groupsDetails.group_amount-groupsDetails.attend_users.length }}人成团，成团后可得开团卡</view>
				<view class="surplus-tip" v-else></view>
				<!-- <view  class="collage-operation-btn invite-btn">去邀请</view> -->
				
				<view  class="collage-operation-btn join-collage-btn" v-if="groupsDetails.group_status=='success'" >参团成功</view>
				<view  class="collage-operation-btn join-collage-btn" @click="attendGroups()" v-if="groupsDetails.group_status == 'pending'&&!groupsDetails.my_attend" >立即参团</view>
				<view  class="collage-operation-btn joined-collage-btn"  v-if="groupsDetails.group_status == 'pending'&&groupsDetails.my_attend" >你已参团了</view>
			</view>
		</view>
		<product-large-sku-cover-com></product-large-sku-cover-com>
		<uni-popup ref="buypopup" type="bottom">
			<view class="buy-content">
				<view class="content">
					<product-selected-sku-com></product-selected-sku-com>
		
					<product-attribute-selector-com v-if="hasAttribute" class="selector-com"></product-attribute-selector-com>
					<product-sku-selector-com v-else class="selector-com"></product-sku-selector-com>
		
					<!-- <product-selected-sku-count-com></product-selected-sku-count-com> -->
		
					<view class="submit">
						<button class="button" plain="true" @click="submitOrder">确认参团</button>
					</view>
				</view>
			</view>
		</uni-popup>
		<view class="sharePopup">
			<uni-popup ref="sharepopup" type="bottom">
				<view class="popup">
					<view class="share">
						<view @click="copyLink()">
							<image src="/static/images/copylink.png" mode=""></image>
							<view>复制链接</view>
						</view>
						<view @click="downLoad()" >
							<image src="/static/images/saveimg.png" mode=""></image>
							<view>下载风速秒APP</view>
						</view>
					</view>
					<view class="cancel" @click="cancelShare">取消</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import store from "store"
	import { mapGetters,mapActions,mapMutations } from 'vuex'
	import CurrentUser from "mixins/CurrentUser"
	import { getGroupsDetails,attendGroups } from 'api/collageApi'
	import ProductLargeSkuCoverCom from "components/product/purchase/ProductLargeSkuCoverCom"
	import ProductSelectedSkuCom from "components/product/purchase/ProductSelectedSkuCom"
	import ProductAttributeSelectorCom from "components/product/purchase/ProductAttributeSelectorCom"
	import ProductSelectedSkuCountCom from "components/product/purchase/ProductSelectedSkuCountCom"
	import ProductSkuSelectorCom from "components/product/purchase/ProductSkuSelectorCom"
	
	export default {
		store,
		components: {
			ProductLargeSkuCoverCom,
			ProductSelectedSkuCom,
			ProductSkuSelectorCom,
			ProductAttributeSelectorCom,
			ProductSelectedSkuCountCom
		},
		mixins: [
			CurrentUser
		],
		data(){
			return{
				isCollageSelf:false,
				group_id:0,
				groupsDetails:{},
				openGroupsUser:null,
				invite_code:null,
				is_share:'false',
				nowDate:'',
				group_disabled_at:''
			}
		},
		computed: {
			...mapGetters([
				'product',
				'user',
				'isLogin',
				'hasAttribute',
				'selectedSku'
				])
		},
		methods:{
			...mapActions(['getCurrentProduct']),
			...mapMutations(['setGroupId']),
			back(){
				uni.navigateBack({})
			},
			backHome(){
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			downLoad(){
				uni.navigateTo({url: '/packs/pages/download/download?from=1'})
			},
			async openBuyPanel() {
				if (await this.isLogin) {
					// 创建订单底部弹框
					this.$refs.buypopup.open('bottom')
				} else {
					uni.navigateTo({
						url: '/packs/pages/auth/auth?from=product'
					})
				}
			},
			async submitOrder() {
				if (await this.isLogin) {
					if (this.selectedSku) {
						uni.navigateTo({
							url: `/packs/pages/order/confirm?needBrokerage=false`
						})
						this.$refs.buypopup.close()
					} else {
						uni.showToast({
							title: '请选择规格',
							mask: true,
							icon: 'none',
							position: 'bottom',
							duration: 2000
						});
					}
				} else {
					uni.redirectTo({
						url: '/packs/one/pages/auth/auth'
					})
				}
			},
			async getGroupsDetails(){
			  let responseData =  await	getGroupsDetails(this.group_id)
				this.groupsDetails = responseData;
				if(this.groupsDetails.user){
					this.openGroupsUser = this.groupsDetails.user
				}else{
					this.openGroupsUser = this.groupsDetails.machine_user
				}
				this.nowDate = new Date().getTime()
				this.group_disabled_at = this.groupsDetails.group_disabled_at
				
				this.init()
				await this.getCurrentProduct(this.groupsDetails.product_id)
			},
			attendGroups(){
				
				let parms = {
					product_id:this.groupsDetails.product_id,
					group_id:this.group_id
				}
				attendGroups(parms).then(res=>{
					this.setGroupId(this.group_id)
					this.openBuyPanel()
				})
			},
			init() {
				var date = new Date().getTime();
				let end_time = new Date(this.groupsDetails.created_at.replace(/-/g, '/')).getTime() + 24*60*60*1000;
				var leftTime = end_time - date; //计算两日期之间相差的毫秒数
				if (leftTime >= 0) {
					let d = parseInt(leftTime / 1000 / 60 / 60 / 24);
					if(d ==1){
						this.groupsDetails.end_times = {
							h: 23,
							m: 59,
							s: 59
						}
					}else{
						let h = parseInt(leftTime / 1000 / 60 / 60 % 24);
						let m = parseInt(leftTime / 1000 / 60 % 60);
						let s = parseInt(leftTime / 1000 % 60);
						this.groupsDetails.end_times = {
							d: d,
							h: h,
							m: m,
							s: s
						}
					}
				}
			},
			async shareProduct() {
				this.$refs.sharepopup.open('bottom')
			},
			cancelShare() {
				this.$refs.sharepopup.close()
			},
			copyLink(){
				let _this = this;
				let invite_code = null; 
				if(this.user){
					invite_code = this.user.invite_code
				}
				let copyUrl = window.location.href + '&is_share=true';
				if(invite_code){
					copyUrl = window.location.href + '&invite_code=' + invite_code + '&is_share=true';
				}
				
				uni.setClipboardData({
				    data: copyUrl,
				    success: function () {
							_this.cancelShare()
							uni.showModal({
								content:'已复制到剪切板!去分享给好友！',
								showCancel: false,
								confirmText:'去分享'
							})
				    }
				})
			},
			async registerByInviterString(inviteCode = null) {
				if (this.user) {
					return
				}
				
				if (inviteCode) {
					let invite_code = this.invite_code
					uni.navigateTo({
						url: `/packs/pages/auth/auth?invite_code=${invite_code}&id=${this.group_id}`
					})
				}
			}
		},
		async onLoad(options) {
			this.group_id = options.id;
			if(options.is_share){
				this.is_share = options.is_share
			}
			if(options.invite_code){
				this.invite_code = options.invite_code
				uni.setStorage({
					key: 'invite_code',
					data: options.invite_code
				})
			}
			if(options.invite_code){
				await this.registerByInviterString(options.invite_code)
			}
			
		},
		onShow() {
			this.getGroupsDetails()
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #F6F6F6;
	}
	.collageDetailGodds{
		width:100%;
		height: 358rpx;
		padding-top: 120rpx;
		background: linear-gradient(180deg, #FFE3D5 0%, rgba(255, 227, 213, 0) 100%);
	}
	.collages-goods-list-item{
		width: 686rpx;
		height: 232rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		margin:0 auto 16rpx;
		display: flex;
		position: relative;
		.goods-icon{
			display:block;
			width: 232rpx;
			height: 232rpx;
			border-radius: 32rpx 0px 0px 32rpx;
		}
		.collages-goods-list-item-right{
			margin:16rpx 0 0 24rpx;
		}
		.goods-describe{
			width: 406rpx;
			height: 80rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		.goods-other-lable{
			display: flex;
			height: 30rpx;
			align-items: center;
			margin-top: 4rpx;
		}
		.free-post,.high-recommend{
			display: block;
			width: 102rpx;
			height: 30rpx;
			margin-right: 8rpx;
		}
		.deliver-goods-address{
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
			height: 34rpx;
			margin-top: 4rpx;
		}
		.goods-num-info{
			display: flex;
		}
		.goods-money{
			>text:nth-child(1){
				font-size: 24rpx;
				font-weight: 400;
				color: #FF4416;
				line-height: 34rpx;
			}
			>text:nth-child(2){
				font-size: 36rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FF4416;
				line-height: 50rpx;
			}
		}
		.goods-solded-num{
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
			margin:12rpx 0 0 24rpx;
		}
	}
	.my-collage-list{
		margin-top: -100rpx;
	}
	.listTop{
		padding-top: 120rpx;
		margin-top: 0rpx;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:999;
	}
	.collage-back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top:26rpx;
		left:32rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.my-collage-list-item{
		padding:32rpx 32rpx 40rpx 32rpx;
		width: 622rpx;
		margin:0 auto;
		background: #FFFFFF;
		border-radius: 32rpx;
	}
	.collage-list-item-title{
		display: flex;
		justify-content: space-between;
		>view:nth-child(1){
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
			line-height: 44rpx;
			display: flex;
		}
	}
	.count-down{
		display: flex;
		align-items: center;
		>view:nth-child(1){
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
			margin-right: 8rpx;
		}
	}
	.count-down1{
		>view{
			color: #999999;
		}
	}
	.count-down-time{
		display: flex;
		align-items: center;
		color: #FE3F34;
	}
	.count-down-time-num{
		width: 32rpx;
		height: 32rpx;
		padding:4rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #FECCC1;
		font-size: 28rpx;
		font-weight: 400;
		color: #FE3F34;
		border-radius: 4rpx;
		border: 1rpx solid #FECCC1;
		margin:0 8rpx;
	}
	.collage-list-item-user{
		width: 100%;
		display: flex;
		margin-top: 38rpx;
		>view{
			>view{
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				line-height: 34rpx;
				margin-top: 20rpx;
				text-align: center;
			}
		}
		>view{
			margin-right: 32rpx;
		}
		>view:nth-child(1){
			margin:0 100rpx 0 136rpx;
		}
		.waiting-groups{
			width: 80rpx;
			height: 80rpx;
			background: #FEF1EC;
			border: 2px dashed #FECAC0;
			border-radius: 50%;
			margin:0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size:40rpx;
			color: #FFA08D;
			font-weight: 400;
			margin-top: 0rpx;
		}
		
	}
	
	.user-img{
		display: block;
		width: 88rpx;
		height:88rpx;
		border-radius: 50%;
	}
	.surplus-tip{
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
		margin:24rpx 0 32rpx 0;
		letter-spacing: 2rpx;
		text-align: center;
	}
	.collage-operation-btn{
		width: 312rpx;
		height: 84rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 48rpx;
		font-size: 36rpx;
		font-weight: 600;
		color: #FFFFFF;
		margin:0 auto;
	}
	.invite-btn,.join-collage-btn{
		background: linear-gradient(180deg, #FF77A6 0%, #FF3E42 100%);
	}
	.joined-collage-btn{
		background: #F0F0F0;
		color:#999999;
		font-weight: 400;
	}
	.grouper-name{
		max-width: 150rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}
	
	.buy-content {
		background: white;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		.content {
			width: 710rpx;
			margin: 20rpx auto;
			.submit {
				.button {
					width: 560rpx;
					height: 70rpx;
					line-height: 70rpx;
					background: linear-gradient(138deg, #FFDF63 0%, #FEBF05 100%);
					// background: linear-gradient(180deg, #FF77A6 0%, #FF3E42 100%);
					border: none;
					border-radius: 52rpx;
					font-size: 30rpx;
					color: #FFFFFF;
					font-weight: 500;
				}
			}
		}
	}
	.selector-com{
		margin-bottom: 20rpx;
	}
	.sharePopup {
		position: absolute;
		z-index: 99999999;
	
		.popup {
			background: white;
			width:750rpx;
			height:460rpx;
			position: fixed;
			left:0;
			bottom: 0;
			border-top-left-radius: 16rpx;
			border-top-right-radius: 16rpx;
	
			.share {
				display: flex;
				justify-content: space-around;
				padding:40rpx 40rpx 20rpx 40rpx;
				>view{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					>view{
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-top: 18rpx;
					}
					>image{
						display:block;
						width: 128rpx;
						height: 128rpx;
					}
				}
			}
	
			.cancel {
				padding:20rpx 0 60rpx 0rpx;
				text-align: center;
				font-size:28rpx;
				font-weight: 400;
				color: #333333;
			}
		}
	
		.share-poster {
			.image {
				width: 556rpx;
				height: 988rpx;
			}
	
			.save {
				width: 484rpx;
				height: 80rpx;
				margin: 0 auto;
				line-height: 80rpx;
				text-align: center;
				background: linear-gradient(135deg, #FFDD62 0%, #FFBF0D 100%);
				border-radius: 50rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
			}
		}
	}
</style>
